<div v-cloak id="app" class="main-content">
    <div class="form-body">
        <one-form :config="config" v-model="fdata" ref="ruleForm">
            <div slot="menuLeft">
                <el-button
                    class="button-item"
                    :loading="btnLoading"
                    type="primary"
                    @click="store('ruleForm')"
                    size="small"
                >
                    保存
                </el-button>
                <el-button size="small" @click="backpage()">返回</el-button>
            </div>
            <!-- 上传图片 -->
            <template slot="file_id" slot-scope="scope">
                <el-upload
                    class="upload-goods"
                    action="{:url('upgrade/upgrade_file/uploadFile')}"
                    :multiple="false"
                    :limit="1"
                    :show-file-list="false"
                    name="version_package"
                    :on-success="handelUploadSuccess"
                >
                    <el-button size="small" type="primary">
                        导入升级包
                    </el-button>
                    <div slot="tip" class="el-upload__tip">只能上传zip文件</div>
                </el-upload>
            </template>
        </one-form>
    </div>
</div>
{include file="common@components/one-form"} {include
file="common@components/one-upload"}
<script>
    const _formData = {:json_encode((array)$formData, 1)} ;
    const app = new Vue({
        el: "#app",
        data() {
            return {
                uploading:false,
                loading:false,
                btnLoading:false,
                config: {
                    formdesc: [
                        {
                            label: "升级包 :",
                            prop: "file_id",
                            content: "图片",
                            slot: true,
                        },
                        {
                            label: "版本类型 :",
                            prop: "branch",
                            type: "radio",
                            rules: [{ required: true, message: '请选择版本类型' }],
                            options: [
                                {
                                    label: '稳定版',
                                    value: 'stable'
                                },
                                {
                                    label: '开发版',
                                    value: 'develop'
                                }
                            ],
                        },
                        {
                            label: "版本号 :",
                            prop: "version",
                            type: "input",
                            rules: [{ required: true, message: '版本号不能为空' }],
                            content: '如：1.0.0.20190514001。版本号比对关键项，该版本号永远为升序，新版本号不得低于上一版本，请认真填写！',
                            bind: {
                                'placeholder': "请输入版本号",
                            },
                        },
                        {
                            label: "更新日志 :",
                            prop: "release",
                            type: "textarea",
                            rules: [{ required: true, message: '更新日志不能为空' }],
                            bind: {
                                'placeholder': "请输入更新日志",
                            },
                        },
                        {
                            label: "状态 :",
                            prop: "status",
                            type: "radio",
                            options: [
                                {
                                    label: '发布',
                                    value: 1
                                },
                                {
                                    label: '存档',
                                    value: 0
                                }
                            ],
                        },
                    ],
                    labelWidth:"200px",
                    rowSize: 1, //一行可以展示几列表单，默认为3列
                },
                fdata:{
                    id: 0,
                    file_id: 0,
                    branch: "stable",
                    version: "",
                    release: "",
                    status: 1,
                },
            }
        },
        created() {
        },
        mounted(){
            if (_formData != '' && Object.keys(_formData).length > 0) {
                this.fdata = _formData;
            }
        },
        methods: {
            //表单验证
            getFormPromise(form) {
                return new Promise(resolve => {
                    form.validate(res => {
                        resolve(res);
                    })
                })
            },
            store(formName) {
                let _this = this;
                // 获取到组件中的form
                const configForm = this.$refs.ruleForm.$refs.ruleForm;
                // 使用Promise.all去校验结果,可加入多个表单
                Promise.all([configForm].map(this.getFormPromise)).then(res => {
                    const validateResult = res.every(item => !!item);
                    if (validateResult) {
                        _this.loading = true;
                        request({
                            params: {
                                s: "upgrade/upgrade_file/edit"
                            },
                            method: "post",
                            data: _this.fdata
                        }).then(e => {
                            _this.loading = false;
                            if (e.data.code == 0) {
                                _this.backpage()
                            } else {
                                _this.$message.error(e.data.msg);
                            }
                        })

                    } else {
                        console.log("表单未校验通过");
                    }
                })

            },
            backpage(){
                navigateTo({
                    s: "upgrade/upgrade_file/index",
                })
            },
            //图片上传完成
            handelUploadSuccess(res){
                if (res.code == 1) {
                    this.$message.error(res.msg);
                    return;
                }
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
                this.fdata.file_id = res.data;
            },
        },
    });
</script>
